<template>
  <view class="u-page__item" v-if="tabbar?.list.length > 0">
    <su-tabbar
      :value="path"
      :fixed="true"
      :placeholder="true"
      :safeAreaInsetBottom="true"
      :inactiveColor="tabbar.inactiveColor"
      :activeColor="tabbar.activeColor"
      :midTabBar="tabbar.mode === 2"
      :customStyle="tabbarStyle"
    >
      <su-tabbar-item
        v-for="(item, index) in tabbar.list"
        :key="item.text"
        :text="item.text"
        :name="item.url"
        :isCenter="getTabbarCenter(index)"
        :centerImage="mall.$url.cdn(item.inactiveIcon)"
        @tap="mall.$router.go(item.url)"
      >
        <template v-slot:active-icon>
          <image class="u-page__item__slot-icon" :src="mall.$url.cdn(item.activeIcon)"></image>
        </template>
        <template v-slot:inactive-icon>
          <image class="u-page__item__slot-icon" :src="mall.$url.cdn(item.inactiveIcon)"></image>
        </template>
      </su-tabbar-item>
    </su-tabbar>
  </view>
</template>

<script setup>
  import { computed, unref } from 'vue';
  import mall from '@/mall';

  const tabbar = computed(() => {
    return {
  "mode": 1,
  "layout": 1,
  "inactiveColor": "#8C8C8C",
  "activeColor": "#FF7A0C",
  "list": [
    {
      "inactiveIcon": "/storage/decorate/20221115/76574bb482da1fd62539c0253f0152d6.png",
      "activeIcon": "/storage/decorate/20221115/c92d07a10eec8850ab9a481638e5159b.gif",
      "url": "/pages/index/index",
      "text": "首页"
    },
    {
      "inactiveIcon": "/storage/decorate/20221115/3fbe0412147a5d7f1c3116219ed39d32.png",
      "activeIcon": "/storage/decorate/20221115/4ce2fdff833f8a37de9a6d760deee994.gif",
      "url": "/pages/index/category?id=3",
      "text": "分类"
    },
    {
      "inactiveIcon": "/storage/decorate/20221115/113eb988efc1fe17cb90cdf5311e5b63.png",
      "activeIcon": "/storage/decorate/20221115/2a3992a220f306d129ac1659304694bd.gif",
      "url": "/pages/index/cart",
      "text": "购物车"
    },
    {
      "inactiveIcon": "/storage/decorate/20221115/f930c59d338a97a158ee53cb65bde082.png",
      "activeIcon": "/storage/decorate/20221115/1130ab158b1c31b1e1d356fa78bb5f4a.gif",
      "url": "/pages/index/user",
      "text": "我的"
    }
  ],
  "background": {
    "type": "color",
    "bgImage": "",
    "bgColor": "#FFFFFF"
  }
}
  });

  const tabbarStyle = computed(() => {
    const backgroundStyle = tabbar.value.background;
    if (backgroundStyle.type == 'color') return { background: backgroundStyle.bgColor };
    if (backgroundStyle.type == 'image')
      return {
        background: `url(${mall.$url.cdn(
          backgroundStyle.bgImage,
        )}) no-repeat top center / 100% auto`,
      };
  });

  const getTabbarCenter = (index) => {
    if (unref(tabbar).mode !== 2) return false;
    return unref(tabbar).list % 2 > 0
      ? Math.ceil(unref(tabbar).list.length / 2) === index + 1
      : false;
  };

  const props = defineProps({
    path: String,
    default: '',
  });
</script>

<style lang="scss">
  .u-page {
    padding: 0;

    &__item {
      &__title {
        color: var(--textSize);
        background-color: #fff;
        padding: 15px;
        font-size: 15px;

        &__slot-title {
          color: var(--textSize);
          font-size: 14px;
        }
      }

      &__slot-icon {
        width: 25px;
        height: 25px;
      }
    }
  }
</style>
